<template>
<div class="">
    <p>
        <span class="tit1">各服务项目订单和订单金额统计图</span>
    </p>
    <div ref="chart1" class='top20' style="width: 100%; height: 400px" />
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                color: [ '#4E7FE6','#FFAE38','#FF5D52' ],
                data1: ['订单总量', '已完成订单量', '订单总金额（元）'],
                data2: ['助洁', '助浴', '助餐', '助行', '助聊','助娱'],
                data3: [311,898,432,432,565,1676],
                data4: [1311,5898,7432,1565,2676,4832],
                data5: [2676,4832,3432,4565,1311,5898],
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;

    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart1, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                color: t.chartData.color,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: t.chartData.data1
                },
                xAxis: [{
                    type: 'category',
                    data: t.chartData.data2,
                    axisPointer: {
                        type: 'shadow'
                    }
                }],
                yAxis: [{
                        type: 'value',
                        // name: '订单量',
                        // min: 0,
                        // max: 250,
                        // interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        // name: '金额',
                        // min: 0,
                        // max: 25,
                        // interval: 5,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [{
                        name: t.chartData.data1[0],
                        type: 'bar',
                        data: t.chartData.data3,
                        barWidth: 30
                    },
                    {
                        name: t.chartData.data1[1],
                        type: 'bar',
                        data: t.chartData.data4,
                        barWidth: 30
                    },
                    {
                        name: t.chartData.data1[2],
                        type: 'line',
                        yAxisIndex: 1,
                        data: t.chartData.data5
                    }
                ]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
